import { ITodoData } from '../../../typings'
import Component from './Component'
import List from './List'

export interface IInputOptions {
    wrapperEl: HTMLElement
    placeholderText: string
    buttonText: string
}

class Input extends Component {
    private options: IInputOptions

    constructor(options: IInputOptions) {
        super()
        this.options = options
    }

    public render() {
        const { placeholderText, buttonText } = this.options
        this.options.wrapperEl.innerHTML += Component.inputView(placeholderText, buttonText)
    }

    public bindEvent() {
        const oAddBtn: HTMLElement = document.querySelector('.add-btn')
        const oInput: HTMLElement = document.querySelector('.todo-input')
        oAddBtn.addEventListener('click', this.handleBtnClick.bind(this, oInput), false)
    }

    private handleBtnClick(inputDom, e:MouseEvent) {
        console.log(inputDom.value,e);
        const val: string = inputDom.value.trim()
        if (val.length) {
            List.addItem(val)
            inputDom.value = ''
        }
    }

}

export default Input